<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import navbar from "@/components/navbar/navbar.vue";
import { computed, ref } from "vue";
import { calculateAge, router, toast } from "@/utils/tools";
import goodsWaterfallMy from "./components/goods/goodsWaterfallMy.vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  apiGetUserInfo,
  apiMySelf,
  apiUserLabel,
  activityList,
} from "@/apis/user";
import { apiComfirmOrder, wxPayMiniAppPay } from "@/apis/order";
import { reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import customerPopup from "@/components/popup/CustomerPopup.vue";
import cache from "@/utils/cache";
import { getToken } from "@/utils/auth";
const userStore = useUserStore();

const userInfo = reactive({});
const withdrawPopup = ref(false);
const validatePopup = ref(true);
const tagFlag = ref(0);
const navbarFixed = ref(false);
const userLabel = ref([]);
const isLogin = ref(true);
const showLoginRef = ref(false);
const userMySelf = reactive({});
let searchText = ref("");
let searchTextCom = ref("");
const criteriaId = ref();
const handleProduct = (e: any) => {
  tagFlag.value = e;
};
const handleWithDraw = () => {
  //console.log("userStore", userStore.userInfo.carBlank);
  if (userMySelf.residueMoney <= 0) {
    toast("无金额可提现");
    return;
  }

  if (userStore.userInfo && !userStore.userInfo.carBlank) {
    toast("请添加收款信息");
    return;
  }
  router(`/pagesMy/earnings/withdraw?residueMoney=${userMySelf.residueMoney}`);
};
// 查看提现规则
const lookRule = () => {
  withdrawPopup.value.open("center");
};

const getMySelf = async () => {
  let res = await apiMySelf();
  Object.assign(userMySelf, res.data);
  if (res.data && res.data.labelType) {
    userLabel.value = res.data.labelType.split(",");
  }
};
const getUserLabel = async () => {
  let res = await apiUserLabel();
  userLabel.value = res.data;
};
onLoad(async (e: any) => {
  criteriaId.value = Number(e.id);
  let token = getToken();
  if (null === token) {
    showLoginRef.value = true;
    isLogin.value = false;
  }
  let { data, code } = await apiGetUserInfo();
  Object.assign(userInfo, data);
  // 保存用户信息
  userStore.setUserInfo(data);
  // 获取个性标签
});
onShow(() => {
  // 获取我的信息
  getMySelf();
});
// 计算年龄
const age = computed(() => {
  return userMySelf.carId ? calculateAge(userMySelf.carId) + "岁" : "--";
});
const sexImg = computed(() => {
  return userMySelf.sex == 0
    ? "@/static/images/sex1.png"
    : "@/static/images/sex2.png";
});
const headSculpture = computed(() => {
  return userMySelf.headSculpture == null || userMySelf.headSculpture == ""
    ? "@/static/images/avatar_default.png"
    : userMySelf.headSculpture;
});

// 跳转店铺会员
const storeClick = () => {
  router(`/pagesMy/store/openStore`);
};

const inputChange = (e: any) => {
  searchTextCom.value = searchText.value;
};

// 我买的
const myBuy = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/order?scene=buy`,
  });
};
// 我卖的

const mySell = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/order?scene=sell`,
  });
};
// 个人信息
const setClick = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pagesMy/user/user`,
  });
};
const appCommodityId = ref([]);
const goodsWaterfallMyRef = ref();
const shoppingId = ref();
const num = ref();
const price = ref();
const comfirmOrder = async () => {
  let params = {
    commodityId: null, //商品ID
    commodityName: null, //商品的标题名称
    actualPayment: null, //支付价格
    userAddressId: null, //发货地址ID
    type: 4, //消费类型  0-开会员  1-开商铺  2-购买商品  3-藏品认证  4-评价费用
    activitiesId: criteriaId.value, //评选活动Id
    appCommodityList: appCommodityId.value, // 4评价活动的时候传
    collectionCertificationList: null, // 3藏品认证的时候传
  };
  // let res = await apiComfirmOrder(params);
  // if (res.code == 200) {
  //   shoppingId.value = res.data.shopingId;
  //   num.value = res.data.num;
  //   price.value = res.data.price;
  //   wxPayMiniAppPayFn();
  // }
  await wxPayMiniAppPayFn(params);
};
const wxPayMiniAppPayFn = async (params:any) => {
  let res = await wxPayMiniAppPay(params);
  // console.log(JSON.parse(res.data), "wxPayMiniAppPay");
  if (res.code == 200) {
    let dataObj = res.data;
    wx.openEmbeddedMiniProgram({
      appId: dataObj.appId,
      path: dataObj.path,
      envVersion: 'release',//正常跳转路径
      success(res) {
        //console.log(res);//打开成功
        uni.setStorageSync('isPaySuccess',true)
      }
    })
  }
};

const publishGoods = () => {
  //console.log(goodsWaterfallMyRef.value.goodsitemId, "确定参赛并缴费");
  const arrOld = goodsWaterfallMyRef.value.goodsitemId;
  const objectArray = arrOld.map((num: any) => ({ id: num }));
  appCommodityId.value = objectArray;
  if (goodsWaterfallMyRef.value.goodsitemId.length === 0) {
    toast("请选择参赛作品");
    return;
  }
  comfirmOrder();
};
</script>

<template>
  <view class="container">
    <view class="goods-box">
      <view class="main">
        <view class="product-list">
          <view class="product-tags">
            <text
              :class="
                'product-tag ' + (tagFlag == 0 ? 'product-tag-selected' : '')
              "
              @click="handleProduct(0)"
              >全部</text
            >
            <text
              :class="
                'product-tag ' + (tagFlag == 1 ? 'product-tag-selected' : '')
              "
              @click="handleProduct(1)"
              >认证</text
            >
            <text
              :class="
                'product-tag ' + (tagFlag == 2 ? 'product-tag-selected' : '')
              "
              @click="handleProduct(2)"
              >在售</text
            >
            <text
              :class="
                'product-tag ' + (tagFlag == 4 ? 'product-tag-selected' : '')
              "
              @click="handleProduct(4)"
              >下架</text
            >
          </view>
          <view class="product-search">
            <input
              type="text"
              placeholder="请输入您想要搜索的店铺"
              v-model="searchText"
            />
            <view class="search-icon">
              <text class="divide">|</text>
              <image
                src="@/static/images/searchicon@2x.png"
                @tap="inputChange"
              />
            </view>
          </view>
        </view>
      </view>
      <goodsWaterfallMy
        :tagFlag="tagFlag"
        :searchText="searchTextCom"
        :criteriaId="criteriaId"
        ref="goodsWaterfallMyRef"
      />
      <view class="fied-bottom">
        <button class="btn-publish" @click="publishGoods">
          确定参赛并缴费
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
::v-deep .uv-navbar__content__left {
  display: none !important;
}
.btn-publish {
  width: 90%;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(
    89.54deg,
    rgba(191, 1, 3, 1) 0.69%,
    rgba(255, 84, 2, 1) 99.31%
  );
  text-align: center;
  padding: 20rpx 0;
  color: #fff;
  font-size: 28rpx;
}
.fied-bottom {
  width: 100%;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20rpx 0;
  box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.1);
  border: 0px solid rgba(187, 187, 187, 1);
}
.validate {
  padding: 40rpx;
  position: absolute;
  border-radius: 20rpx;
  width: 626rpx;
  height: 500rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;

  .icons-close {
    width: 50rpx;
    height: 50rpx;
  }

  .btn-group {
    margin-top: 40rpx;

    .btn-cancel {
      border-radius: 8px;
      border: 1px solid rgba(154, 154, 154);
      font-size: 14px;
      width: 250rpx;
      color: #4f4f4f;
      height: 80rpx;
    }

    .btn-open {
      border-radius: 8px;
      background: linear-gradient(0deg, #bf0103, #ff5402);

      color: #ffffff;
      border: 0px solid #bbbbbb;
      font-size: 14px;
      width: 250rpx;
      height: 80rpx;
    }
  }

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }
}

.islogin {
  font-size: 28rpx;
  margin-top: 100rpx;
  height: 100%;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  .login {
    color: #c33e29;
  }
}

.container {
  padding: 40rpx 0 0 0;
  background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background-size: 100% 310px;
  .user {
    font-size: 28rpx;
    color: #ffffff;
    padding: 0 20rpx 20rpx 20rpx;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    .header-info {
      position: relative;

      display: flex;
      flex-direction: row;
      width: 100%;
      height: 128rpx;

      .head-center {
        width: 20rpx;
        height: 100%;
      }

      .head {
        background-color: #ffffff;
        border-radius: 42rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 128rpx;
        height: 128rpx;
        box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.1);

        .head-avatar {
          border-radius: 42rpx;
          width: 120rpx;
          height: 120rpx;

          object-fit: cover;
        }
      }

      .right {
        .store-center {
          height: 20rpx;
          width: 100%;
        }

        .store {
          image {
            width: 27rpx;
            height: 27rpx;
          }
        }
      }

      .userinfo-feature {
        top: 0;
        right: 0;
        position: absolute;

        .userinfo-feature-center {
          width: 20rpx;
        }

        .feature {
          border-radius: 10px;

          width: 66rpx;
          height: 66rpx;
          background-color: rgba(255, 255, 255, 0.5);
        }

        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
    }
  }

  .main {
    // box-sizing: border-box;
    // background-color: #ffffff;
    // width: 100%;
    // height: 100%;
    // padding: 30rpx;
    // border-radius: 24rpx;

    .main-top {
      width: 100%;
      font-size: 28rpx;
      display: flex;
      justify-content: space-around;

      text {
        margin-right: 10rpx;
      }

      .feature {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #bebebe;
      }

      .number {
        font-size: 32rpx;
        font-weight: 700;
        color: #000000;
      }

      .wordart {
        font-size: 36rpx;
        font-weight: 700;
        color: #328cfe;
        font-style: italic;
        text-shadow: 1px 2px 1px #3cddc9;
        mix-blend-mode: multiply;
      }
    }

    .my-earnings {
      .header {
        width: 100%;
        margin: 10rpx 0;
      }

      .live-help {
        border-radius: 40rpx;
        padding: 10rpx 15rpx;
        border: 2px solid #efefef;

        text {
          color: #b54730;
          font-size: 24rpx;
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .earnings {
        .money {
          font-size: 56rpx;
          font-weight: 600;
        }

        .yuan {
          display: block;
          margin-top: 20rpx;
          color: #101010;
          font-size: 24rpx;
          margin-left: 10rpx;
        }

        .title {
          color: #9a9a9a;
          font-size: 24rpx;
          margin: 10rpx 0 40rpx;
        }
      }

      .withdraw {
        margin: 20rpx;

        .btn {
          border: 1px solid #b54730;
          border-radius: 50rpx;
          width: 500rpx;
          height: 80rpx;
          margin: 0 auto;
          color: #b54730;
        }

        .tips {
          color: #9a9a9a;
          font-size: 24rpx;
          margin: 10rpx 0;
        }

        .money {
          color: #b54730;
        }
      }
    }

    .signature {
      display: flex;
      font-size: 25rpx;
      margin: 24rpx 0 26rpx;
      color: #9a9a9a;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .tag {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5rpx;
        width: auto;
        margin-right: 20rpx;
        margin: 2px 2px;
        padding: 5rpx 10rpx;
        color: rgba(154, 154, 154, 1);
        font-size: 24rpx;
      }

      image {
        width: 25rpx;
        height: 25rpx;
        margin-bottom: rpx;
      }
    }

    .sell {
      display: flex;
      flex-direction: column;

      .sell-title {
        color: #101010;
        margin: 20rpx 0;
        font-size: 32rpx;
        font-weight: 600;
        display: flex;
        justify-content: space-between;

        .look {
          color: #9a9a9a;
          font-weight: none;

          font-size: 24rpx;
        }
      }

      image {
        width: 320rpx;
        height: 82rpx;
      }

      .my-sell {
        display: flex;
        justify-content: space-around;

        .sell-operate {
          position: relative;
          height: 100%;

          text {
            color: #ffffff;
            font-size: 32rpx;
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .product-list {
      .product-tags {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;

        .product-tag {
          font-size: 28rpx;
          color: #9a9a9a;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 122rpx;
          height: 64rpx;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 12rpx;
        }

        .product-tag-selected {
          background: linear-gradient(
            0deg,
            rgba(191, 1, 3, 1),
            rgba(255, 84, 2, 1)
          );
          color: #ffffff;
        }
      }

      .product-search {
        position: relative;
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
        border: 0px solid rgba(187, 187, 187, 1);

        position: relative;
        margin-top: 20rpx;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

        input {
          flex: 0.8;
        }

        .search-icon {
          right: 20rpx;
          position: absolute;
          display: flex;
          align-items: center;

          .divide {
            margin-right: 20rpx;
            color: #cecece;
          }

          image {
            width: 43rpx;
            height: 43rpx;
          }
        }
      }
    }
  }
}

.goods-box {
  box-sizing: border-box;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  padding: 30rpx;
  border-radius: 24rpx;
}

.rule {
  padding: 30rpx;
}

.head {
  color: #d92d20;
  font-weight: 600;
  .line1 {
    width: 0;
    height: 0;
    border: 2px solid transparent;
  }

  .line2 {
    width: 0;
    height: 0;
    border: 2px solid transparent;
    border-left: 150rpx solid #e73503;
  }

  .title {
    margin: 0 20rpx;
  }
}

.content {
  font-size: 28rpx;
}

.validate {
  padding: 40rpx;

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }
}
</style>
